<template>
	<view class="">
		<view class="">
			<view class="header">
				<!-- 轮播图1111-->
				<swiper class="swiper" autoplay="true" circular="true" interval="4000" duration="800"
					indicator-active-color="#fff" style='height:350rpx'>
					<block v-for="(item,index) in bannerData" :key="index">
						<swiper-item>
							<navigator class="slide-nav">
								<image :src="item.image" class="slide-image" mode='aspectFill' />
							</navigator>
						</swiper-item>
						<view class="swiperCorner">
							{{index+1}}/{{bannerData.length}}
						</view>
					</block>
				</swiper>
				<!-- 基础信息-->
				<view class="page">
					<view class="_paddingTop" style="font-size: 35rpx;font-weight: bold;">
						2021款特斯拉MODEL3标准续航后续升级版
					</view>
					<view class="_flex _justify_between _paddingTop">
						<view class="smallTxt">19.99<text style="font-size: 24rpx;">万</text></view>
						<view class="smallBtn">询底价</view>
					</view>
					<view class="_flex _justify_between _paddingTop">
						<view class="">
							<text>爱买车估价 </text>
							<text style="margin-left: 20rpx;">22.98万</text>
						</view>
						<view class="">
							查看报告>
						</view>
					</view>
					<view class="_flex _justify_between _paddingTop">
						<view class="">
							<text>新车指导价 </text>
							<text style="margin-left: 20rpx;">24.99万</text>
						</view>
						<view class="">
							新车详情>
						</view>
					</view>
					<view class="_flex _justify_between _paddingTop">
						<view class="">
							<text>06-11发布 </text>
						</view>
					</view>
					<view class="_flex _justify_between"
						style="margin-top: 20rpx; padding: 20rpx 0; border-top: 1px solid #eee;">
						<view class="">
							<text class="stage">分期购车 </text>
							<text style="margin-left: 20rpx;">首付6.4万</text>
						</view>
						<view class="">
							货款计算>
						</view>
					</view>
				</view>
			</view>
			<!-- 区域滚动标题 -->
			<view style="height: 90rpx;" class="_marginTop">
				<u-tabs :list="list" :is-scroll="true" active-color="#002B56" :current="current" @change="tabChange"></u-tabs>
			</view>
			<view class="commonPart page"  id=" cheliangxinxi">
				<view class="box_head" >
					<view class="title" >
						车辆信息
					</view>
				</view>
				<view class="_flex _justify_between _wrap" style="border-bottom: 1px solid #eee;">
					<view class="carInfoLi" v-for="(item,index) in carInfolist" :key="index">
						<view class="carInfoTitle">
							{{item.title}}
						</view>
						<view class="carInfoContent">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="carInfoBtn" style="text-align: center;height: auto!important;">
					查看详细参数配置>
				</view>
			</view>
			<view class="commonPart page" id="chekuangfenxi">
				<view class="box_head _flex _justify_between align-items_center">
					<view class="title">
						车况分析
					</view>
					<view class="carAnalyseBtn">
						车况报告
					</view>
				</view>
				<view style="line-height: 50rpx;margin-top: 10rpx;">
					<view class="">
						当前车辆
						<text style="color: #EB6E10;">车况良好</text>
						,建议您联系商家看车试驾
					</view>
				</view>
				<view class="">
					<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/table.png"
						style="width: 100%;height: 500rpx;" mode="widthFix">
					</image>
				</view>
			</view>
			<!-- 车辆实拍 -->
			<view class="commonPart page paddingBottom" id="cheliangshipai">
				<view class="box_head _flex _justify_between align-items_center">
					<view class="title">
						车辆实拍
					</view>
				</view>
				<u-read-more show-height="600" color="#FF6600">
					<view class="" v-for="(item,index) in carPhotoList" :key="index">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/model3.png"
							mode="aspectFit" style="width: 80%;height: 500rpx;"></image>
					</view>
				</u-read-more>
			</view>		
			<view class="commonPart page paddingBottom" id="sellerxinxi">
				<view class="box_head _flex _justify_between align-items_center">
					<view class="title">
						卖家推荐
					</view>
					<view class="carAnalyseBtn">
						查看
					</view>
				</view>
				<view class="">
					<u-read-more show-height="200" color="#FF6600">
						<rich-text :nodes="sellerInfo"></rich-text>
					</u-read-more>
				</view>
			<!-- 	<view class=" seller">
					<view class="_flex align-items_center">
						<u-avatar style="width: 20%;" :src="form.avatarSrc"></u-avatar>
						<view class="" style="width: 70%;">
							<view class="">
								张可
							</view>
							<view class="_flex align-items_center" style="margin-top: 10rpx;">
								<image src="../../static/authentication.png" style="width: 100rpx;height: 40rpx;"
									mode="scaleToFill"></image>
							</view>
						</view>
						<view class="" style="width: 10%;text-align: right;">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view> -->

			</view>
			<!-- 虚假信息提示 -->
			<view class="commonPart page _flex align-items_center" style="background: #FFC94B;">
				<view class="" style="width: 80%;">
					<view class="_paddingTop">
						如遇虚假信息，车型不符等，请立即举报
					</view>
					<view class="_paddingTop" style="font-size: 24rpx; padding-bottom: 20rpx;">
						<view class="">
							<text style="color: red;">*</text>
							<text>交易前，请仔细检查车况，核对车辆证件；</text>
						</view>
						<view class="">
							<text style="color: red;">*</text>
							<text>交易过程中谨慎支付定金；</text>
						</view>
						<view class="">
							<text style="color: red;">*</text>
							<text>爱买车仅展示车源信息，不参与具体交易过程</text>
						</view>
					</view>
				</view>
				<view class="" style="width: 20%;text-align: center;">
					<view class="">
						<u-icon name="warning" color="#333" size="60"></u-icon>
					</view>
					<view class="">
						点击举报
					</view>
				</view>
			</view>
			<view class="commonPart page paddingBottom" id="shichanghangqing">
				<view class="box_head _flex _justify_between align-items_center">
					<view class="title">
						市场行情
					</view>
				</view>
				<view class="_flex _paddingTop _justify_between marketInfo">
					<view class="" style="width: 50%;">
						<view class="marketInfo_num" style="color: #FF6600;">
							21.25万
						</view>
						<view class="">
							近期本省成交价
						</view>
					</view>
<!-- 					<view class="" style="width: 31%;">
						<view class="marketInfo_num">
							12辆
						</view>
						<view class="">
							同车型本市在售
						</view>
					</view> -->
					<view class="" style="width: 50%;">
						<view class="marketInfo_num">
							12辆
						</view>
						<view class="">
							同车型本省在售
						</view>
					</view>
				</view>
				<view class="market_ul" v-for="(item,index) in marketList" :key="index">
					<view class=" _flex">
						<text class="market_title">2021款特斯拉MODEL3标准续航后续升级版</text>
						<text class="market_price">19.99万</text>
					</view>
					<view class="_flex _justify_between" style="font-size: 24rpx;color: #888;">
						<text>北京</text>
						<text>2021-04上牌</text>
						<text>1.2万公里</text>
						<text>成交于2021.06.06</text>
					</view>
				</view>
				<view class="carInfoBtn" style="text-align: center;">
					查看更多>
				</view>
			</view>
			
			<view class="commonPart page paddingBottom" id="tuijiancheyuan">
				<view class="box_head _flex _justify_between align-items_center">
					<view class="title">
						相关推荐
					</view>
					<view class="" style="width: 300rpx;">
						<u-tabs  style="width: 100%;" active-color="#002B56" :list="recommendList" :is-scroll="false"
							:current="recommendCurrent" @change="recommendChange"></u-tabs>
					</view>
				</view>
				<view class="">
					<view class="_flex dataList" v-for="(item,index) in dataList" :key="index">
						<image :src="item.img"
							mode="aspectFit" style="width: 200rpx;height: 160rpx;"></image>
						<view class="news-wrap" style="    width: 370rpx;">
							<view style="font-weight: bold;">
								{{item.title}}
							</view>
							<view style="color: #888888;font-size: 24rpx;">
								{{item.desc}}
							</view>
							<view class="_flex" style="color: #D29E23;font-size: 24rpx;">
								<view class="">
									<text class="newsTip">估价</text>
									<text>{{item.evaluate}}万</text>
								</view>
								<view class="" style="margin-left: 10rpx;">
									<text class="newsTip">性价比</text>
									<text>{{item.xjPrice}}</text>
								</view>
							</view>
							<view class="_flex _justify_between">
								<view class="" style="color: #888888;font-size: 24rpx" v-if="active!=1">
									{{item.pingtai}}
								</view>
								<view class="" style="color: #EB6E10;">
									{{item.price}}万
								</view>
							</view>
						</view>
					</view>
					<view class="carInfoBtn" style="text-align: center;">
						查看更多>
					</view>
				</view>
			</view>
			<view class="" style="height: 120rpx;width: 100%;">
				
			</view>
		</view>
		
		<view class="commonPart page" style="margin: 0px; position: fixed;width: 100%;bottom: 0px;">
			<view class="buyCar_bottom _flex _justify_between align-items_center"
				style="height: 120rpx; text-align: center;">
				<view class="">
					<view class="">
						<u-icon name="star" size="45"></u-icon>
					</view>
					<view class="">
						收藏
					</view>
				</view>
				<view class="">
					<view class="">
						<u-icon name="rmb-circle" size="45"></u-icon>
					</view>
					<view class="">
						贷款买车
					</view>
				</view>
				<u-button type="primary" plain size="medium">
					<u-icon name="chat" size="45"></u-icon>
					咨询车况
				</u-button>
				<u-button type="primary" size="medium">
					<u-icon name="phone" size="45"></u-icon>
					询问底价
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	export default {
		data() {
			return {
				current: 0,
				list: [{
						typeName: '车辆信息'
					}, {
						typeName: '车况分析'
					}, {
						typeName: '车辆实拍',
					},
					{
						typeName: '卖家信息',
					},
					{
						typeName: '市场行情',
					},
					{
						typeName: '推荐车源',
					},
				],
				/* 轮播图 */
				bannerData: [{
					image: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/model3.png',
				}],
				carInfolist: [{
					title: "表显里程",
					content: "0.8万公里"
				}, {
					title: "上牌时间",
					content: "2021-04"
				}, {
					title: "车辆所在地",
					content: "北京"
				}, {
					title: "续航里程",
					content: "420KM"
				}, {
					title: "电池容量",
					content: "76.8kWh"
				}, {
					title: "过户次数",
					content: "0次"
				}],
				form: {
					avatarSrc: "https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/model3.png"
				},
				dataList: [{
						title: "特斯拉Model 3 2021款  标准续航后驱升级版",
						desc: "2021.4上牌/0.8万公里/北京",
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/use/01.png',
						evaluate: "22.98",
						price: "19.99",
						xjPrice:'86.9%',
						pingtai:"iBUY CAR 06-11"
					},
					{
						title: "小鹏 P7 2020款  后驱超长续航至尊版",
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/use/02.png',
						desc: "2020.9上牌/2.2万公里/重庆",
						evaluate: "23.55",
						xjPrice:'97.5%',
						price: "22.98",
						pingtai:"二手车之家 05-12"
					},
					{
						title: "蔚来ES6 2019款  430KM 首发纪念版",
						desc: "2019.6上牌/3.3万公里/上海",
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/use/03.png',
						evaluate: "32.25",
						xjPrice:'96.3%',
						price: "31.08",
						pingtai:"瓜子二手车 06-11"
					},
				],
				marketList: [{}, {}],
				carPhotoList: [{}, {}, {}],
				recommendList: [{
					typeName: '同价位'
				}, {
					typeName: '同车系'
				}],
				recommendCurrent: 0,
				sellerInfo: `　个人一收车，一直在市区上下班使用，每天行驶历程不超50公里，车况良好，可由爱买车出具车况报告并估价`,
			};
		},
		methods: {
			recommendChange(index) {
				this.recommendCurrent = index;
			},
			tabChange(index) {
				console.log(index)
				this.current = index;
				if (index === 0) {
					// 车辆档案
					uni.pageScrollTo({
						selector: '#cheliangxinxi'
					})
				}else if(index === 1){
					// 车况分析
					uni.pageScrollTo({
						selector: '#chekuangfenxi'
					})
				}else if(index === 2){
					// 车辆实拍
					uni.pageScrollTo({
						selector: '#cheliangshipai'
					})
				}else if(index === 3){
					// 卖家信息
					uni.pageScrollTo({
						selector: '#sellerxinxi'
					})
				}else if(index === 4){
					// 市场行情
					uni.pageScrollTo({
						selector: '#shichanghangqing'
					})
				}else if(index === 5){
					// 推荐车源
					uni.pageScrollTo({
						selector: '#tuijiancheyuan'
					})
				}
			},
		}
	};
</script>
<style scoped>
	/**轮播图*/
	
	.swiper {
		width: 100%;
		height: 230px;
		margin: 0px;
		position: relative;
	}

	.slide-nav {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.swiperCorner {
		right: 19rpx;
		position: absolute;
		background: #6C6766;
		color: #fff;
		padding: 8rpx 20rpx;
		bottom: 6px;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.smallTxt {
		/* color: #FF6600; */
		color: #EB6E10;
		font-size: 38rpx;
		font-weight: bold;
	}

	.smallBtn {
		/* background: #FF6600; */
		background: #EB6E10;
		color: #fff;
		padding: 8rpx 20rpx;
		border-radius: 18rpx;
	}

	.icbc {
		margin-left: 11px;
		border: 1px solid #F39419;
		color: #F39419;
		border-radius: 5rpx;
		font-size: 24rpx;
		padding: 0 10rpx;
	}

	.stage {
		/* background: #F39419; */
		background: #3F536E;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.box_head {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #eee;
	}

	.box_head .title {
		color: #002A55;
		font-size: 34rpx;
		font-weight: bold;
	}

	.carInfoLi {
		width: 33.33%;
		padding: 20rpx 0;
		text-align: center;
		line-height: 40rpx;
	}

	.carInfoTitle {
		font-size: 24rpx;
		color: #888;
	}

	.carInfoBtn {
		height: 40rpx;
		line-height: 80rpx;
	}

	.carAnalyseBtn {
		/* background: #FF6600; */
		background: #EB6E10;
		color: #fff;
		padding: 0 20rpx;
		-webkit-border-radius: 9px;
		border-radius: 18rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.seller {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.marketInfo {
		text-align: center;
		background-color: #F5F5F5;
		padding: 40rpx 0;
		line-height: 50rpx;
	}

	.marketInfo_num {
		font-size: 40rpx;
	}

	.market_ul {
		font-size: 30rpx;
		padding: 40rpx 0;
		border-bottom: 1px solid #eee;
	}

	.market_title {
		width: 80%;
		overflow: hidden;
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: nowrap;
	}

	.market_price {
		height: 60rpx;
		display: inline-block;
		line-height: 60rpx;
		color: #FC6504;
	}

	.news-wrap {
		margin-left: 20rpx;
		line-height: 45rpx;
		color: #333333;
	}

	.newsTxt {
		width: 340rpx;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tips {
		width: 30rpx;
		height: 30rpx;
	}

	.newsTip {
		background: #F4E5C3;
		display: inline-block;
		padding: 0 8rpx;
		margin-right: 8rpx;
	}

	.dataList {
		margin-top: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}

	.paddingBottom {
		padding-bottom: 40rpx;
	}

	.header {
		background-color: #fff;
		/* margin: 30rpx 30rpx 0; */
	}

	.commonPart {
		background-color: #fff;
		margin: 30rpx 30rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>
<style>
	.buyCar_bottom .u-size-medium {
		padding: 0px 10rpx !important;
	}
</style>

